import React from 'react'
import { Divider, Modal, Button, Form, Input, DatePicker, Spin } from 'antd'
import LwjTable from 'components/LwjTable/LwjTable'
import moment from 'moment';
import DescriptionList from 'components/DescriptionList';
import { couponStatus, couponsAddType, receiptType } from 'utils/enumConfig'
import { LwjDownload, LwjUpload } from 'components'

const List = ({
  onShowDetail,
  auditVisible,
  detailVisible,
  currentItem,
  onSelectRows,
  optionType,
  dispatch,
  onShowAudit,
  approve,
  deny,
  global,
  auditType,
  fileVisible,
  form: { getFieldDecorator, validateFields },
  ...tableProps
}) => {
  const { Description } = DescriptionList;

  const FormItem = Form.Item;

  const formItemLayout = {
    labelCol: {
      xs: { span: 4 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 20 },
      sm: { span: 20 },
    },
  };

  const columns = [
    {
      title: '优惠券ID',
      dataIndex: 'couponsNum',
      key: 'couponsNum',
    }, {
      title: '备注',
      dataIndex: 'memo',
      key: 'memo'
    }, {
      title: '创建信息',
      dataIndex: 'createdByName',
      key: 'createdByName',
      align: "center",
      render: (text, record, index) => ("创建人:" + record.createdByName + " " + moment(record.createTime).format('YYYY-MM-DD'))
    }, {
      title: '审核信息',
      dataIndex: 'checkedByName',
      key: 'checkedByName',
      align: "center",
      render: (text, record, index) => (record.status === "UN_CHECKED" || record.checkedByName === null ? "" : "审核人:" + record.checkedByName + " " + moment(record.checkTime).format('YYYY-MM-DD'))
    }, {
      title: '优惠券状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record, index) => (couponStatus[record.status])
    }, {
      title: '操作',
      key: 'handle',
      render: (text, record) => (
        <span>
          {record.status === "UN_CHECKED" && <a onClick={() => onShowAudit(record)} >审核</a>}
          {record.status === "UN_CHECKED" && <Divider type="vertical" />}
          <a onClick={() => onShowDetail(record)}>详情</a>
        </span>
      )
    }
  ];
  const xlsProps = {
    target: '/services/upload/marketing',
    accept: 'image/*,.pdf,.dwg,.dwf,.zip,.rar,.xlsx,.xls',
    uploadIcon: 'upload',
    fileType: '',
    onChange(value) {
    },
    showUploadList: true
  }
  return (
    <div>
      <Modal footer={null} visible={detailVisible} width={800} title={optionType === "audit" ? "优惠券审核" : "优惠券详情"} onCancel={() => {
        dispatch({
          type: 'coupon/setCurrentItem',
          payload: {}
        })
        dispatch({
          type: 'coupon/closeAllModal'
        })
      }}>
        <Spin spinning={global}>
          <DescriptionList
            size="small"
            title={optionType === "audit" ? "审核信息" : "详情信息"}
            style={{
              marginBottom: 32
            }}>
            <Description term="优惠券ID">{currentItem.couponsNum}</Description>
            {optionType === "detail" && <Description term="状态">{couponStatus[currentItem.status]}</Description>}
            {optionType === "detail" && <Description term="业务类型">优惠券</Description>}
            {optionType === "detail" && <Description term="总金额">{currentItem.amount}</Description>}
            {optionType === "detail" && <Description term="已用金额">{(currentItem.usedAmount === 0 || currentItem.usedAmount === null) ? "0" : currentItem.usedAmount}</Description>}
            {optionType === "detail" && <Description term="使用合同号">{currentItem.contractNum}</Description>}
            {optionType === "detail" && <Description term="创建时间">{moment(currentItem.createTime).format("YYYY-MM-DD HH:mm:ss")}</Description>}
            {optionType === "detail" && <Description term="使用时间">{moment(currentItem.useTime).format("YYYY-MM-DD HH:mm:ss") === 'Invalid date' ? " " : moment(currentItem.useTime).format("YYYY-MM-DD HH:mm:ss")}</Description>}
            {optionType === "detail" && <Description term="手续费">{currentItem.checkServiceFee}</Description>}
            {optionType === "detail" && <Description term="结算号">{currentItem.checkSettlementNum}</Description>}
            {optionType === "detail" && <Description term="支付时间">{moment(currentItem.addTime).format("YYYY-MM-DD")}</Description>}
            {optionType === "detail" && <Description term="备注">{currentItem.memo}</Description>}
            {optionType === "detail" && currentItem.attachment && <Description term="附件">{< LwjDownload title={
              '点击下载'
            }
              targetUrl={
                currentItem.attachment
              } />}</Description>}
            {optionType === "detail" && <Description term="支付凭证号">{currentItem.paymentNum}</Description>}
            {optionType === "detail" && <Description term="审核备注">{currentItem.checkRemark}</Description>}
            {optionType === "detail" && currentItem.checkAttachment && <Description term="审核附件">{< LwjDownload title={
              '点击下载'
            }
              targetUrl={
                currentItem.checkAttachment
              } />}</Description>}
            {optionType === "audit" && <Description term="收款单类型">{receiptType[currentItem.receiptType]}</Description>}
            {optionType === "audit" && <Description term="收款方">{currentItem.reciver}</Description>}
            {optionType === "audit" && <Description term="收款账户">优惠券</Description>}
            {optionType === "audit" && <Description term="适用门店">{currentItem.distributorName}</Description>}
            {optionType === "audit" && <Description term="支付方式">{couponsAddType[currentItem.addType]}</Description>}
            {optionType === "audit" && <Description term="支付时间">{moment(currentItem.addTime).format("YYYY-MM-DD")}</Description>}
            {optionType === "audit" && <Description term="支付凭证号">{currentItem.paymentNum}</Description>}
            {optionType === "audit" && <Description term="优惠券金额">{currentItem.amount}</Description>}
            {optionType === "audit" && <Description term="适用合同">{currentItem.contractNum}</Description>}
            {optionType === "audit" && <Description term="制单人">{currentItem.createUser}</Description>}
            {optionType === "audit" && currentItem.attachment && <Description term="附件">{< LwjDownload title={
              '点击下载'
            }
              targetUrl={
                currentItem.attachment
              } />}</Description>}
            {optionType === "audit" && <Description term="备注">{currentItem.memo}</Description>}
          </DescriptionList>
        </Spin>
        {optionType === "audit" && <div><Button type="primary" onClick={() => {
          dispatch({
            type: 'coupon/setAuditVisible', payload: {
              auditVisible: true,
              auditType: 'approve'
            }
          })
        }}>审核通过</Button> <Button type="danger" onClick={() => {
          dispatch({
            type: 'coupon/setAuditVisible', payload: {
              auditVisible: true,
              auditType: 'deny'
            }
          })
        }}>审核不通过</Button> <Button onClick={() => dispatch({ type: 'coupon/closeAllModal' })}>取消</Button></div>}
      </Modal>
      <Modal
        visible={auditVisible}
        title={auditType === 'approve' ? "审核通过信息" : "审核不通过信息"}
        loading={global}
        destroyOnClose={true}
        onOk={() => {
          validateFields((err, values) => {
            if (err) {
              return;
            }
            if (auditType === 'approve') {
              values.checkArrivalTime = values.checkArrivalTime.valueOf();
              approve(currentItem.id, values)
            } else {
              dispatch({
                type: 'coupon/deny', payload: {
                  id: currentItem.id,
                  values: values
                }
              })
            }
          });

        }}
        onCancel={() => dispatch({
          type: 'coupon/setAuditVisible', payload: {
            auditVisible: false,
            auditType: ''
          }
        })}
      >
        <Form>
          <FormItem label="备注:" {...formItemLayout}>
            {getFieldDecorator('checkRemark', {
              rules: [{ required: true, message: '请输入备注' }],
            })(<Input type="textarea" placeholder="请输入备注" />)}
          </FormItem>
          <FormItem
            label="上传附件"
            {...formItemLayout}
          >
            {getFieldDecorator('checkAttachment', {
              rules: [
                { required: true, message: '请上传邮件审核截图' },
              ],
            })(
              <LwjUpload multiple={true} {...xlsProps} />)}
            <span>请上传邮件审核截图</span>
          </FormItem>
          {auditType === 'approve' && <FormItem style={{ marginTop: -20 }} label="手续费:" {...formItemLayout}>
            {getFieldDecorator('checkServiceFee', {
              rules: [{ required: true, message: '请输入手续费！' }],
            })(<Input type="number" placeholder="请输入手续费" />)}
          </FormItem>}
          {auditType === 'approve' && <FormItem label="结算号:" {...formItemLayout}>
            {getFieldDecorator('checkSettlementNum', {
              rules: [{ required: true, message: '请输入结算号！' }],
            })(<Input type="text" placeholder="请输入结算号" />)}
          </FormItem>}
          {auditType === 'approve' && <FormItem label="到帐时间:" {...formItemLayout}>
            {getFieldDecorator('checkArrivalTime', {
              rules: [{ required: true, message: '请输入到帐时间！' }],
            })(<DatePicker onChange={() => {
            }} />)}
          </FormItem>}
        </Form>
      </Modal>
      <LwjTable
        {...tableProps}
        dispatch={dispatch}
        columns={columns}
      />
    </div>
  )
};
export default Form.create()(List)
